<template>
  <div class="student-product">
    <!-- 搜说区域 -->
    <div class="search">
        <template>
        <el-select v-model="searchValue"
                   filterable
                   clearable
                   remote
                   @blur="searchBlur"
                   @change="searchTextChange"
                   reserve-keyword
                   @clear="clear"
                   placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
                   :remote-method="remoteMethod"
                   :loading="loading">
          <el-option v-for="item in searchList"
                     :key="item.sId"
                     :label="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="onSearchButtonClick"
                 plain></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary"
                 @click="addStu"
                 :disabled="disabled">添加项目</el-button>
    </div>
    <!-- 选择班级 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select v-model="classes"
                     filterable
                     @visible-change="classVisible"
                     @change="classChange"
                     placeholder="请选择">
            <el-option label="全部"
                       value="all"></el-option>
            <el-option v-for="(item, index) in classOptions"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->

    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="80"
        >
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="$router.push({ path: '/StudentManager/studentProfile' })"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 页码选择 -->
   <div class="pagination">
      <el-pagination background
                     hide-on-single-page
                     layout="prev, pager, next"
                     @current-change="changePage"
                     :page-size="dataCount"
                     :total="total"
                     :current-page="page"
                     >
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
   <qf-dialog></qf-dialog>
  </div>
</template>

<script>
import dialog from "../../../../components/dialog/index.vue";
import * as api from "@/api";
export default {
  components: {
   "qf-dialog": dialog,
  },
  data() {
    return {
      params: {
        class: "",
        count: 5,
      },
      
      page:1,
      dataPage: "", // 页码
      dataCount: 5, // 每页展示的数量
      total: 0, // 总共的数据条数
      classOptions: [],
      disabled: false,
      // 表格的数据对象
      stuData: [],
      // 表格加载动画控制
      loading: false,
      classes: "",
      searchList: [],
      searchValue: "",
      blurSearchValue: "",
      list: [],
    };
  },
  created() {
    this.updateStuTable(); //页面加载的时候,获取表格数据
  },
  methods: {
    addStuRequest(params) {
      //将来通过dialog的eventBus进行调用
    },
    editStuRequest(params) {
      //将来通过dialog的eventBus进行调用
    },
    // 分页器页码发生改变的时候触发的事件
    changePage(page) {
      // 点击分页切换的时候 需要判断是否搜索了 如果搜索了 那么就应该在搜索结果中 进入第后面页码数据
      // console.log(page);
      this.page=page
      this.updateStuTable(page)

    },
    // 导出excel
    exportExcel() {},
    // 班级选择框展开/收起触发的事件
    classVisible(isVisible) {
      //展开的时候需要获取数据
      //调用获取列表的方法
      console.log(isVisible);
      if(isVisible){
        api.getClassesApi()
          .then(res=>{
            console.log(res);
            this.classOptions=res.data.data
          })
      }
    },
    // 选择班级
    classChange(query) {
      // console.log("======", query);
      //如果query是all代表要显示所有的数据,后台的设定是,class字段传空字符串就返回所有班级的数据,所以一下用一个三元表达式来处理
      console.log(query);
      if(query!="all"){
        this.updateStuTable("","",query)
      }else{
        this.updateStuTable()
      }
    },
    onSearchButtonClick() {
      // 点击搜索按钮

       this.remoteMethod(this.blurSearchValue);
        this.searchTextChange();
    },
    // 搜索框失去焦点 保持输入框的内容
    searchBlur() {

       this.searchValue = this.blurSearchValue;


    },
    // 编辑学员
    editStu(row) {
      // console.log(row);
      // let  page =this.page
      this.$bus.$emit("edit-stu", row);
      
    },
    // 删除学员
    deleteStu(row) {
      //  console.log(row);
       let {sId}=row
       let  page =this.page
 

      this.$confirm('此操作会永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          // 用户点击确认会执行的逻辑 有交互效果
         api.dellStuApi(sId)
        .then(res=>{ 
           console.log(page);
          // console.log(res);
          if(res.data.state){
            //更新视图
           
            this.updateStuTable(page)
            this.$message.success("删除成功")

          }else{
            this.$message.error("该数据已被删除")
          }
        })
        .catch(err=>{
          console.log(err);
          this.$message.error("删除失败")
        })
         


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });







      

    },
    // 增加学员
    addStu() {
      //因为控制dialog显示和隐藏的属性在dialog组件内部,通过eventBus进行修改, 弹出dialog
      // console.log(123);
      this.$bus.$emit("add-stu");
    },
    // 更新表格数据
    updateStuTable(page="",count=5,classes="") {
      //打开loading动画
     this.loading=true
      api.getStuListApi(page,count,classes)
        .then((res) => {
          console.log(res);
          if (res.data.state) {
            //关闭动画
            this.loading=false
            //判断返回的数据
            this.stuData = res.data.data;
            this.total=res.data.total
          }
        })
        .catch((err) => {
          //失败的时候也要关闭动画
          this.loading=false
          // console.log(err);
        });
    },
    clear() {
      //情况输入框内容的时候,表格应该显示所有的内容
       this.updateStuTable();
    },
    // 搜索框选中值发生变化的事件
    searchTextChange(searchText) {
        console.log(searchText);
        console.log(this.searchList);
        this.stuData = this.searchList;
    },
    remoteMethod(query) {
      // 键盘弹起的时候获取输入值
        this.blurSearchValue = query; //赋值三方变量进行输入框内容存储
        let key = query;
        let page = 1;
        let count = "";
        // console.log(searchStu);
        api.searchStu(page, count, key).then((res) => {
          this.searchList = res.data.data;
        });
    },
  },
  mounted() {
   
    //订阅bus更新表格的事件
    this.$bus.$on("update-table", (a) => {
      // console.log(a);
      if(a=="+"){
      
        this.page = 1
        console.log(this.page);
        this.updateStuTable(1);
      }else{
        console.log("else");
        this.updateStuTable(this.page);
      }
    });
  },
};
</script>
<style scoped lang="less">
.search {
  text-align: left;
  margin: 10px 5px;
}
.choose-class {
  text-align: left;
}
/deep/ .table {
  margin: 10px 5px;
}
</style>
